<template>
  <div class="issue-detail" v-loading="loading">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button @click="goBack" text>
          <el-icon><ArrowLeft /></el-icon>
          返回问题列表
        </el-button>
        <div class="issue-header">
          <div class="issue-title-section">
            <div class="priority-indicator" :class="issue.priority"></div>
            <h1 class="issue-title">{{ issue.title }}</h1>
            <div class="issue-meta">
              <span class="issue-id">#{{ issue.id }}</span>
              <el-tag
                :type="getTypeColor(issue.type)"
                size="small"
                effect="plain"
              >
                {{ getTypeText(issue.type) }}
              </el-tag>
              <el-tag :type="getStatusType(issue.status)" size="small">
                {{ issue.status }}
              </el-tag>
              <el-tag
                :type="getPriorityType(issue.priority)"
                size="small"
                effect="plain"
              >
                {{ getPriorityText(issue.priority) }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
      <div class="header-right">
        <el-button @click="editIssue">
          <el-icon><Edit /></el-icon>
          编辑问题
        </el-button>
        <el-dropdown @command="handleCommand">
          <el-button>
            更多操作
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="assign">
                <el-icon><User /></el-icon>
                分配问题
              </el-dropdown-item>
              <el-dropdown-item
                command="resolve"
                v-if="issue.status !== '已解决' && issue.status !== '已关闭'"
              >
                <el-icon><Check /></el-icon>
                标记解决
              </el-dropdown-item>
              <el-dropdown-item
                command="close"
                v-if="issue.status !== '已关闭'"
              >
                <el-icon><Lock /></el-icon>
                关闭问题
              </el-dropdown-item>
              <el-dropdown-item
                command="reopen"
                v-if="issue.status === '已关闭'"
              >
                <el-icon><Unlock /></el-icon>
                重新打开
              </el-dropdown-item>
              <el-dropdown-item command="export" divided>
                <el-icon><Download /></el-icon>
                导出问题
              </el-dropdown-item>
              <el-dropdown-item command="delete">
                <el-icon><Delete /></el-icon>
                删除问题
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="content-layout">
      <!-- 左侧主要内容 -->
      <div class="main-content">
        <!-- 问题描述 -->
        <div class="section-card">
          <div class="section-header">
            <h3>问题描述</h3>
          </div>
          <div class="section-content">
            <div class="description-content" v-if="issue.description">
              {{ issue.description }}
            </div>
            <div class="empty-description" v-else>
              暂无描述
            </div>
          </div>
        </div>
        
        <!-- 重现步骤 -->
        <div class="section-card" v-if="issue.reproductionSteps">
          <div class="section-header">
            <h3>重现步骤</h3>
          </div>
          <div class="section-content">
            <ol class="reproduction-steps">
              <li v-for="(step, index) in issue.reproductionSteps" :key="index">
                {{ step }}
              </li>
            </ol>
          </div>
        </div>
        
        <!-- 附件 -->
        <div class="section-card" v-if="issue.attachments && issue.attachments.length > 0">
          <div class="section-header">
            <h3>附件</h3>
            <el-button size="small" @click="uploadAttachment">
              <el-icon><Plus /></el-icon>
              添加附件
            </el-button>
          </div>
          <div class="section-content">
            <div class="attachments-list">
              <div
                v-for="attachment in issue.attachments"
                :key="attachment.id"
                class="attachment-item"
              >
                <div class="attachment-info">
                  <el-icon class="attachment-icon"><Document /></el-icon>
                  <div class="attachment-details">
                    <div class="attachment-name">{{ attachment.name }}</div>
                    <div class="attachment-meta">
                      {{ formatFileSize(attachment.size) }} • 
                      {{ formatDate(attachment.uploadedAt) }}
                    </div>
                  </div>
                </div>
                <div class="attachment-actions">
                  <el-button size="small" text @click="downloadAttachment(attachment)">
                    <el-icon><Download /></el-icon>
                  </el-button>
                  <el-button size="small" text @click="deleteAttachment(attachment.id)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 评论区域 -->
        <div class="section-card">
          <div class="section-header">
            <h3>评论 ({{ issue.comments?.length || 0 }})</h3>
          </div>
          <div class="section-content">
            <!-- 添加评论 -->
            <div class="add-comment">
              <div class="comment-form">
                <el-input
                  v-model="newComment"
                  type="textarea"
                  :rows="3"
                  placeholder="添加评论..."
                  resize="none"
                />
                <div class="comment-actions">
                  <el-button
                    type="primary"
                    size="small"
                    @click="addComment"
                    :disabled="!newComment.trim()"
                  >
                    发表评论
                  </el-button>
                </div>
              </div>
            </div>
            
            <!-- 评论列表 -->
            <div class="comments-list" v-if="issue.comments && issue.comments.length > 0">
              <div
                v-for="comment in issue.comments"
                :key="comment.id"
                class="comment-item"
              >
                <div class="comment-avatar">
                  <el-avatar :size="32">
                    {{ comment.author.username.charAt(0).toUpperCase() }}
                  </el-avatar>
                </div>
                <div class="comment-content">
                  <div class="comment-header">
                    <span class="comment-author">{{ comment.author.username }}</span>
                    <span class="comment-time">{{ formatDate(comment.createdAt) }}</span>
                  </div>
                  <div class="comment-text">{{ comment.content }}</div>
                  <div class="comment-actions">
                    <el-button size="small" text @click="replyComment()">
                      回复
                    </el-button>
                    <el-button
                      size="small"
                      text
                      @click="deleteComment(comment.id)"
                      v-if="canDeleteComment()"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 空状态 -->
            <div class="empty-comments" v-else>
              <el-empty description="暂无评论" :image-size="80" />
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧信息面板 -->
      <div class="side-panel">
        <!-- 问题信息 -->
        <div class="info-card">
          <div class="info-header">
            <h4>问题信息</h4>
          </div>
          <div class="info-content">
            <div class="info-item">
              <label>状态</label>
              <el-tag :type="getStatusType(issue.status)" size="small">
                {{ issue.status }}
              </el-tag>
            </div>
            <div class="info-item">
              <label>优先级</label>
              <el-tag
                :type="getPriorityType(issue.priority)"
                size="small"
                effect="plain"
              >
                {{ getPriorityText(issue.priority) }}
              </el-tag>
            </div>
            <div class="info-item">
              <label>类型</label>
              <el-tag
                :type="getTypeColor(issue.type)"
                size="small"
                effect="plain"
              >
                {{ getTypeText(issue.type) }}
              </el-tag>
            </div>
            <div class="info-item">
              <label>所属项目</label>
              <div class="info-value">
                <el-link
                  v-if="issue.project"
                  @click="viewProject(issue.project.id)"
                  type="primary"
                >
                  {{ issue.project.name }}
                </el-link>
                <span v-else class="text-muted">未分配</span>
              </div>
            </div>
            <div class="info-item">
              <label>报告人</label>
              <div class="user-info">
                <el-avatar :size="20">
                  {{ issue.reporter.username.charAt(0).toUpperCase() }}
                </el-avatar>
                <span>{{ issue.reporter.username }}</span>
              </div>
            </div>
            <div class="info-item">
              <label>负责人</label>
              <div class="user-info" v-if="issue.assignee">
                <el-avatar :size="20">
                  {{ issue.assignee.username.charAt(0).toUpperCase() }}
                </el-avatar>
                <span>{{ issue.assignee.username }}</span>
              </div>
              <span v-else class="text-muted">未分配</span>
            </div>
            <div class="info-item">
              <label>创建时间</label>
              <div class="info-value">{{ formatDateTime(issue.createdAt) }}</div>
            </div>
            <div class="info-item">
              <label>更新时间</label>
              <div class="info-value">{{ formatDateTime(issue.updatedAt) }}</div>
            </div>
            <div class="info-item" v-if="issue.resolvedAt">
              <label>解决时间</label>
              <div class="info-value">{{ formatDateTime(issue.resolvedAt) }}</div>
            </div>
          </div>
        </div>
        
        <!-- 活动时间线 -->
        <div class="info-card">
          <div class="info-header">
            <h4>活动时间线</h4>
          </div>
          <div class="info-content">
            <el-timeline>
              <el-timeline-item
                v-for="activity in issue.activities"
                :key="activity.id"
                :timestamp="formatDateTime(activity.createdAt)"
                placement="top"
              >
                <div class="activity-content">
                  <div class="activity-header">
                    <span class="activity-user">{{ activity.user.username }}</span>
                    <span class="activity-action">{{ activity.action }}</span>
                  </div>
                  <div class="activity-description" v-if="activity.description">
                    {{ activity.description }}
                  </div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
        
        <!-- 相关问题 -->
        <div class="info-card" v-if="relatedIssues.length > 0">
          <div class="info-header">
            <h4>相关问题</h4>
          </div>
          <div class="info-content">
            <div class="related-issues">
              <div
                v-for="relatedIssue in relatedIssues"
                :key="relatedIssue.id"
                class="related-issue-item"
                @click="viewIssue(relatedIssue.id)"
              >
                <div class="related-issue-title">
                  #{{ relatedIssue.id }} {{ relatedIssue.title }}
                </div>
                <el-tag
                  :type="getStatusType(relatedIssue.status)"
                  size="small"
                >
                  {{ relatedIssue.status }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import {
  ArrowLeft,
  ArrowDown,
  Edit,
  Delete,
  User,
  Check,
  Lock,
  Unlock,
  Download,
  Plus,
  Document
} from '@element-plus/icons-vue'


const router = useRouter()


const loading = ref(false)
const newComment = ref('')

// 模拟问题数据
const issue = ref({
  id: 1,
  title: '用户登录页面样式错乱',
  description: '在Chrome浏览器中，登录页面的样式显示不正常，按钮位置偏移。这个问题影响了用户的正常登录流程，需要尽快修复。',
  type: 'bug',
  status: '待处理',
  priority: 'high',
  project: { id: 1, name: '项目管理系统' },
  reporter: { id: 1, username: '张三' },
  assignee: { id: 2, username: '李四' },
  createdAt: new Date('2024-01-15T10:30:00'),
  updatedAt: new Date('2024-01-17T14:20:00'),
  resolvedAt: null,
  reproductionSteps: [
    '打开Chrome浏览器',
    '访问登录页面',
    '观察页面布局',
    '发现按钮位置异常'
  ],
  attachments: [
    {
      id: 1,
      name: 'login-page-screenshot.png',
      size: 245760,
      uploadedAt: new Date('2024-01-15T10:35:00')
    },
    {
      id: 2,
      name: 'browser-console-errors.txt',
      size: 1024,
      uploadedAt: new Date('2024-01-15T10:40:00')
    }
  ],
  comments: [
    {
      id: 1,
      content: '我也遇到了同样的问题，在Firefox浏览器中也有类似现象。',
      author: { id: 3, username: '王五' },
      createdAt: new Date('2024-01-15T11:00:00')
    },
    {
      id: 2,
      content: '已经开始调查这个问题，初步怀疑是CSS样式冲突导致的。',
      author: { id: 2, username: '李四' },
      createdAt: new Date('2024-01-16T09:15:00')
    },
    {
      id: 3,
      content: '建议检查最近的CSS更新，可能与响应式布局相关。',
      author: { id: 4, username: '赵六' },
      createdAt: new Date('2024-01-16T14:30:00')
    }
  ],
  activities: [
    {
      id: 1,
      action: '创建了问题',
      description: '报告了登录页面样式问题',
      user: { id: 1, username: '张三' },
      createdAt: new Date('2024-01-15T10:30:00')
    },
    {
      id: 2,
      action: '分配了问题',
      description: '将问题分配给李四',
      user: { id: 1, username: '张三' },
      createdAt: new Date('2024-01-15T10:35:00')
    },
    {
      id: 3,
      action: '添加了评论',
      description: '开始调查问题原因',
      user: { id: 2, username: '李四' },
      createdAt: new Date('2024-01-16T09:15:00')
    },
    {
      id: 4,
      action: '更新了优先级',
      description: '将优先级设置为高',
      user: { id: 2, username: '李四' },
      createdAt: new Date('2024-01-17T14:20:00')
    }
  ]
})

// 相关问题
const relatedIssues = ref([
  {
    id: 2,
    title: '移动端登录页面适配问题',
    status: '处理中'
  },
  {
    id: 5,
    title: '登录表单验证错误',
    status: '已解决'
  }
])

// 获取状态类型
const getStatusType = (status: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
  const types: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'> = {
    '待处理': 'info',
    '处理中': 'warning',
    '已解决': 'success',
    '已关闭': 'info',
    '重新打开': 'danger'
  }
  return types[status] || 'info'
}

// 获取优先级类型
const getPriorityType = (priority: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
  const types: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'> = {
    'urgent': 'danger',
    'high': 'danger',
    'medium': 'warning',
    'low': 'success'
  }
  return types[priority] || 'info'
}

// 获取优先级文本
const getPriorityText = (priority: string) => {
  const texts: Record<string, string> = {
    'urgent': '紧急',
    'high': '高',
    'medium': '中',
    'low': '低'
  }
  return texts[priority] || priority
}

// 获取类型颜色
const getTypeColor = (type: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
  const colors: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'> = {
    'bug': 'danger',
    'feature': 'primary',
    'improvement': 'success',
    'task': 'warning'
  }
  return colors[type] || 'info'
}

// 获取类型文本
const getTypeText = (type: string) => {
  const texts: Record<string, string> = {
    'bug': 'Bug',
    'feature': '功能请求',
    'improvement': '改进',
    'task': '任务'
  }
  return texts[type] || type
}

// 格式化日期
const formatDate = (date: Date) => {
  return dayjs(date).format('MM-DD HH:mm')
}

const formatDateTime = (date: Date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}

// 格式化文件大小
const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 编辑问题
const editIssue = () => {
  router.push(`/issues/${issue.value.id}/edit`)
}

// 查看项目
const viewProject = (projectId: number) => {
  router.push(`/projects/${projectId}`)
}

// 查看问题
const viewIssue = (issueId: number) => {
  router.push(`/issues/${issueId}`)
}

// 操作处理
const handleCommand = (command: string) => {
  switch (command) {
    case 'assign':
      assignIssue()
      break
    case 'resolve':
      resolveIssue()
      break
    case 'close':
      closeIssue()
      break
    case 'reopen':
      reopenIssue()
      break
    case 'export':
      exportIssue()
      break
    case 'delete':
      deleteIssue()
      break
  }
}

// 分配问题
const assignIssue = () => {
  ElMessage.info('问题分配功能开发中...')
}

// 解决问题
const resolveIssue = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要将此问题标记为已解决吗？',
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }
    )
    
    issue.value.status = '已解决'
    issue.value.resolvedAt = new Date() as any
    issue.value.updatedAt = new Date()
    
    // 添加活动记录
    issue.value.activities.unshift({
      id: Date.now(),
      action: '解决了问题',
      description: '问题已标记为解决',
      user: { id: 1, username: '当前用户' },
      createdAt: new Date()
    })
    
    ElMessage.success('问题已标记为解决')
  } catch {
    // 用户取消操作
  }
}

// 关闭问题
const closeIssue = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要关闭此问题吗？关闭后问题将不再显示在活跃列表中。',
      '确认关闭',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    issue.value.status = '已关闭'
    issue.value.updatedAt = new Date()
    
    // 添加活动记录
    issue.value.activities.unshift({
      id: Date.now(),
      action: '关闭了问题',
      description: '问题已关闭',
      user: { id: 1, username: '当前用户' },
      createdAt: new Date()
    })
    
    ElMessage.success('问题已关闭')
  } catch {
    // 用户取消操作
  }
}

// 重新打开问题
const reopenIssue = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要重新打开此问题吗？',
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    issue.value.status = '重新打开'
    issue.value.updatedAt = new Date()
    
    // 添加活动记录
    issue.value.activities.unshift({
      id: Date.now(),
      action: '重新打开了问题',
      description: '问题已重新打开',
      user: { id: 1, username: '当前用户' },
      createdAt: new Date()
    })
    
    ElMessage.success('问题已重新打开')
  } catch {
    // 用户取消操作
  }
}

// 导出问题
const exportIssue = () => {
  ElMessage.info('问题导出功能开发中...')
}

// 删除问题
const deleteIssue = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个问题吗？删除后无法恢复。',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    ElMessage.success('问题删除成功')
    router.push('/issues')
  } catch {
    // 用户取消删除
  }
}

// 上传附件
const uploadAttachment = () => {
  ElMessage.info('附件上传功能开发中...')
}

// 下载附件
const downloadAttachment = (attachment: any) => {
  ElMessage.info(`下载附件: ${attachment.name}`)
}

// 删除附件
const deleteAttachment = async (attachmentId: number) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个附件吗？',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    issue.value.attachments = issue.value.attachments?.filter(a => a.id !== attachmentId) || []
    ElMessage.success('附件删除成功')
  } catch {
    // 用户取消删除
  }
}

// 添加评论
const addComment = () => {
  if (!newComment.value.trim()) return
  
  const comment = {
    id: Date.now(),
    content: newComment.value.trim(),
    author: { id: 1, username: '当前用户' },
    createdAt: new Date()
  }
  
  if (!issue.value.comments) {
    issue.value.comments = []
  }
  
  issue.value.comments.push(comment)
  
  // 添加活动记录
  issue.value.activities.unshift({
    id: Date.now(),
    action: '添加了评论',
    description: newComment.value.trim(),
    user: { id: 1, username: '当前用户' },
    createdAt: new Date()
  })
  
  newComment.value = ''
  ElMessage.success('评论添加成功')
}

// 回复评论
const replyComment = () => {
  ElMessage.info('评论回复功能开发中...')
}

// 删除评论
const deleteComment = async (commentId: number) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条评论吗？',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    issue.value.comments = issue.value.comments?.filter(c => c.id !== commentId) || []
    ElMessage.success('评论删除成功')
  } catch {
    // 用户取消删除
  }
}

// 检查是否可以删除评论
const canDeleteComment = () => {
  // 这里应该检查当前用户是否是评论作者或有管理权限
  return true
}

// 加载数据
const loadData = async () => {
  loading.value = true
  try {

    // 这里应该调用API加载问题详情
    // await issueStore.fetchIssue(parseInt(issueId))
    await new Promise(resolve => setTimeout(resolve, 500))
  } catch (error) {
    console.error('加载问题详情失败:', error)
    ElMessage.error('加载问题详情失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.issue-detail {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-left {
  flex: 1;
}

.issue-header {
  margin-top: 16px;
}

.issue-title-section {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.priority-indicator {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  margin-top: 4px;
  flex-shrink: 0;
}

.priority-indicator.urgent {
  background: #ff4757;
}

.priority-indicator.high {
  background: #f56c6c;
}

.priority-indicator.medium {
  background: #e6a23c;
}

.priority-indicator.low {
  background: #67c23a;
}

.issue-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
  line-height: 1.3;
}

.issue-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.issue-id {
  font-weight: 600;
  color: #409eff;
  font-size: 14px;
}

.header-right {
  display: flex;
  gap: 12px;
}

.content-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
  background: #fafafa;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.section-content {
  padding: 20px;
}

.description-content {
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
}

.empty-description {
  color: #999;
  font-style: italic;
}

.reproduction-steps {
  margin: 0;
  padding-left: 20px;
}

.reproduction-steps li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attachment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  background: #fafafa;
}

.attachment-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.attachment-icon {
  font-size: 20px;
  color: #409eff;
}

.attachment-details {
  flex: 1;
}

.attachment-name {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.attachment-meta {
  font-size: 12px;
  color: #666;
}

.attachment-actions {
  display: flex;
  gap: 4px;
}

.add-comment {
  margin-bottom: 20px;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-item {
  display: flex;
  gap: 12px;
}

.comment-avatar {
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-author {
  font-weight: 500;
  color: #333;
}

.comment-time {
  font-size: 12px;
  color: #666;
}

.comment-text {
  line-height: 1.5;
  color: #333;
  margin-bottom: 8px;
}

.comment-actions {
  display: flex;
  gap: 8px;
}

.empty-comments {
  text-align: center;
  padding: 40px 0;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.info-header {
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  background: #fafafa;
}

.info-header h4 {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.info-content {
  padding: 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  min-width: 60px;
}

.info-value {
  font-size: 13px;
  color: #333;
  text-align: right;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.text-muted {
  color: #999;
  font-style: italic;
  font-size: 13px;
}

.activity-content {
  font-size: 13px;
}

.activity-header {
  margin-bottom: 4px;
}

.activity-user {
  font-weight: 500;
  color: #333;
}

.activity-action {
  color: #666;
  margin-left: 4px;
}

.activity-description {
  color: #666;
  font-size: 12px;
}

.related-issues {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.related-issue-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.related-issue-item:hover {
  background-color: #f5f7fa;
}

.related-issue-title {
  font-size: 12px;
  color: #333;
  line-height: 1.4;
  flex: 1;
  margin-right: 8px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .content-layout {
    grid-template-columns: 1fr 280px;
  }
}

@media (max-width: 768px) {
  .content-layout {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .header-right {
    justify-content: flex-end;
  }
  
  .issue-title-section {
    flex-direction: column;
    gap: 8px;
  }
  
  .priority-indicator {
    width: 100%;
    height: 4px;
    margin-top: 0;
  }
}
</style>